import { View, Text, Image } from '@tarojs/components'
import React from 'react'
import './index.less'

export interface Package {
  /** 套餐ID */
  id: string
  /** 套餐名称 */
  name: string
  /** 套餐描述 */
  description: string
  /** 套餐图片 */
  image: string
  /** 价格 */
  price?: string
  /** 额外信息 */
  extra?: React.ReactNode
}

export interface PackageCardProps {
  /** 套餐信息 */
  package: Package
  /** 是否选中 */
  isSelected?: boolean
  /** 选择事件 */
  onSelect?: (packageId: string) => void
  /** 自定义类名 */
  className?: string
}

/**
 * PackageCard 套餐卡片组件
 * 用于展示套餐信息
 */
const PackageCard: React.FC<PackageCardProps> = ({ package: pkg, isSelected = false, onSelect, className = '' }) => {
  const handleClick = () => {
    if (onSelect) {
      onSelect(pkg.id)
    }
  }

  return (
    <View className={`package-card ${isSelected ? 'selected' : ''} ${className}`} onClick={handleClick}>
      <View className='package-image'>
        <Image src={pkg.image} mode='aspectFill' className='image' />
        {isSelected && <View className='selected-badge'>✓</View>}
      </View>
      <View className='package-content'>
        <Text className='package-name'>{pkg.name}</Text>
        <Text className='package-description'>{pkg.description}</Text>
        {pkg.price && <Text className='package-price'>{pkg.price}</Text>}
        {pkg.extra && <View className='package-extra'>{pkg.extra}</View>}
      </View>
    </View>
  )
}

export default PackageCard

